/* === v-side-menu === */

.v-side-menu {
  width: 180px;
  height: auto;
  background: @side-menu-bg;
  position: relative;
}

.side-menu-item {
  box-sizing: border-box;
  width: 100%;
  height: @side-menu-item-height;
  background: @side-menu-bg;
  font-size: @font-size-base + 1;
  color: @side-menu-font-color;
  line-height: @side-menu-item-height;
  padding: 0 @side-menu-item-padding;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: border-color .2s, background-color .2s, color .2s;
  position: relative;
  &.is-active {
    color: #1a98ff;
  }
  &:hover {
    background: @side-menu-hover-bg;
  }
}

.v-side-submenu {
  position: relative;
  &__title {
    .side-menu-item;
  }
  &__icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    transition-duration: 200ms;
    transform-origin: center center;
    position: absolute;
    right: 15px;
    top: 20px;
    &.arrow-right {
      background: url('../../assets/arrow-right.png') center center no-repeat;
      background-size: 8px 10px;
      transform: rotateZ(0deg);
    }
  }
  &.is-opened {
    >.v-side-submenu__title {
      .arrow-right {
        transform: rotateZ(90deg);
      }
    }
  }
}

.v-side-menu-item {
  .side-menu-item;
}

.v-side-submenu .v-side-menu-item-group {
  position: relative;
  .v-side-menu-item {
    .side-menu-item;
    height: @side-menu-subitem-height;
    font-size: 12px;
    line-height: @side-menu-subitem-height;
    background: @side-menu-subitem-bg;
    padding-left: @side-menu-item-padding + 26;
    &.is-active {
      background: @side-menu-subitem-active-bg;
    }
    &:hover {
      background: @side-menu-subitem-hover-bg;
    }
  }
}

.v-side-menu-item-group .v-side-submenu {
  &__title {
    .side-menu-item;
    height: @side-menu-subitem-height;
    font-size: 12px;
    line-height: @side-menu-subitem-height;
    background: @side-menu-subitem-bg;
    padding-left: @side-menu-item-padding + 25;
  }
}

.v-side-menu {
  &--collapse {
    width: 64px;

    >.v-side-menu-item,
    >.v-side-submenu >.v-side-submenu__title {
      [class^="v-icon-"] {
        margin: 0;
        vertical-align: middle;
        width: 24px;
        text-align: center;
      }
      .v-side-submenu__icon-arrow {
        display: none;
      }
      span {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
      }
    }

    >.v-side-menu-item.is-active i {
      color: inherit;
    }

    .v-side-menu {
      width: 120px;
    }

    .v-side-submenu {
      position: relative;
      .v-side-menu {
        position: absolute;
        margin-left: 5px;
        top: 0;
        left: 100%;
        z-index: 10;
        border-radius: 4px;
        overflow: hidden;
      }

      &.is-opened {
        > .v-side-submenu__title .v-side-submenu__icon-arrow {
          transform: none;
        }
      }
    }
  }
}
